import React, { useState } from "react";
import "./Nav.css";

// 左侧侧边栏菜单项配置
const sidebarItems = [
  { key: "template", label: "模板", icon: "📦" },
  { key: "text", label: "文字", icon: "T" },
  { key: "material", label: "素材", icon: "✨" },
  { key: "image", label: "图片", icon: "🖼️" },
  { key: "qrcode", label: "二维码", icon: "🔲" },
  { key: "upload", label: "上传", icon: "⬆️" },
];

// 类型定义，保证类型安全
interface MaterialItem {
  type: 'text' | 'shape' | 'image-container' | 'image'; // 素材类型
  content?: string; // 文字内容
  shape?: 'circle' | 'triangle' | 'square' | 'star' | 'heart' | 'arrow' | 'rect' | 'hexagon' | 'speech-bubble' | 'phone' | 'badge' | 'line' | 'squiggly' | 'starburst' | 'rounded-rect' | 'grid' | 'flowing-shape' | 'flag' | 'numbers-2024'; // 形状类型
  subCategory?: 'basic' | 'solid' | 'hollow' | 'brush' | 'chart' | 'character' | 'decorative' | 'dotted' | 'dashed' | 'squiggly' | 'title' | 'body' | 'shadow' | 'gradient'; // 子分类
  container?: 'circle' | 'triangle' | 'square'; // 图片容器类型
  url?: string; // 图片链接
  effect?: string; // 文字特效
}

interface MaterialCategory {
  key: string; // 分类唯一标识
  label: string; // 分类显示名称
  items: MaterialItem[]; // 分类下的素材项
}

// 形状筛选分类数据
const shapeFilters = [
  { key: 'all', label: '全部' },
  { key: 'basic', label: '基础形状' },
  { key: 'solid', label: '实心形状' },
  { key: 'hollow', label: '空心形状' },
  { key: 'brush', label: '笔画笔刷' },
  { key: 'chart', label: '图表' },
  { key: 'character', label: '字符' },
  { key: 'decorative', label: '装饰形状' },
];

// 线条筛选分类数据
const lineFilters = [
  { key: 'all', label: '全部' },
  { key: 'basic', label: '基础线条' },
  { key: 'solid', label: '实心线条' },
  { key: 'dotted', label: '点线' },
  { key: 'dashed', label: '虚线' },
  { key: 'squiggly', label: '波浪线' },
];

// 箭头筛选分类数据
const arrowFilters = [
  { key: 'all', label: '全部' },
  { key: 'solid', label: '实心箭头' },
  { key: 'hollow', label: '空心箭头' },
];

// 文字筛选分类数据
const textFilters = [
  { key: 'all', label: '全部' },
  { key: 'title', label: '标题' },
  { key: 'body', label: '正文' },
  { key: 'shadow', label: '阴影' },
  { key: 'gradient', label: '渐变' },
];

// 文字分类数据，包含不同类型的文字样式
const textCategories: MaterialCategory[] = [
  {
    key: 'title',
    label: '标题',
    items: [
      { type: 'text', content: '大标题', subCategory: 'title', effect: 'projection' },
      { type: 'text', content: '副标题', subCategory: 'title', effect: '3d' },
      { type: 'text', content: '小标题', subCategory: 'title', effect: 'glow' },
      { type: 'text', content: '醒目标题', subCategory: 'title', effect: 'outline' },
      { type: 'text', content: '创意标题', subCategory: 'title', effect: 'rainbow' },
    ]
  },
  {
    key: 'body',
    label: '正文',
    items: [
      { type: 'text', content: '正文段落', subCategory: 'body' },
      { type: 'text', content: '引用文本', subCategory: 'body' },
      { type: 'text', content: '说明文字', subCategory: 'body' },
      { type: 'text', content: '注释文本', subCategory: 'body' },
    ]
  },
  {
    key: 'shadow',
    label: '阴影',
    items: [
      { type: 'text', content: '投影效果', subCategory: 'shadow', effect: 'projection' },
      { type: 'text', content: '立体阴影', subCategory: 'shadow', effect: '3d' },
      { type: 'text', content: '发光效果', subCategory: 'shadow', effect: 'glow' },
      { type: 'text', content: '描边效果', subCategory: 'shadow', effect: 'outline' },
    ]
  },
  {
    key: 'gradient',
    label: '渐变',
    items: [
      { type: 'text', content: '彩虹渐变', subCategory: 'gradient', effect: 'rainbow' },
      { type: 'text', content: '金属渐变', subCategory: 'gradient', effect: 'metallic' },
      { type: 'text', content: '霓虹渐变', subCategory: 'gradient', effect: 'neon' },
      { type: 'text', content: '双色渐变', subCategory: 'gradient', effect: 'duotone' },
    ]
  }
];

// 素材分类数据，包含艺术字、形状、线条、箭头、图片容器等
const materialCategories: MaterialCategory[] = [
  {
    key: 'artistic-text',
    label: '艺术字',
    items: [
      { type: 'text', content: '艺术字效果' },
      { type: 'text', content: 'Happy New Year' },
      { type: 'text', content: '2024' },
      { type: 'text', content: '促销大放送' },
      { type: 'text', content: '限时抢购' },
      { type: 'text', content: '精选推荐' },
      { type: 'text', content: '爆款新品' },
      { type: 'text', content: '品质生活' },
      { type: 'text', content: '创意设计' },
    ]
  },
  {
    key: 'shapes',
    label: '形状',
    items: [
      // 基础形状
      { type: 'shape', shape: 'circle', subCategory: 'basic' },
      { type: 'shape', shape: 'triangle', subCategory: 'basic' },
      { type: 'shape', shape: 'square', subCategory: 'basic' },
      { type: 'shape', shape: 'rect', subCategory: 'basic' },
      { type: 'shape', shape: 'star', subCategory: 'basic' },
      { type: 'shape', shape: 'heart', subCategory: 'basic' },
      { type: 'shape', shape: 'hexagon', subCategory: 'basic' },
      { type: 'shape', shape: 'speech-bubble', subCategory: 'basic' },
      { type: 'shape', shape: 'phone', subCategory: 'basic' },
      { type: 'shape', shape: 'badge', subCategory: 'basic' },
      { type: 'shape', shape: 'rounded-rect', subCategory: 'basic' },
      { type: 'shape', shape: 'starburst', subCategory: 'basic' },
      { type: 'shape', shape: 'grid', subCategory: 'basic' },
      { type: 'shape', shape: 'flowing-shape', subCategory: 'basic' },
      { type: 'shape', shape: 'flag', subCategory: 'basic' },
      { type: 'shape', shape: 'numbers-2024', subCategory: 'basic' },
      { type: 'shape', shape: 'arrow', subCategory: 'basic' }, // 箭头基础形状
      // 实心形状
      { type: 'shape', shape: 'circle', subCategory: 'solid' },
      { type: 'shape', shape: 'triangle', subCategory: 'solid' },
      { type: 'shape', shape: 'square', subCategory: 'solid' },
      { type: 'shape', shape: 'rect', subCategory: 'solid' },
      { type: 'shape', shape: 'star', subCategory: 'solid' },
      { type: 'shape', shape: 'heart', subCategory: 'solid' },
      { type: 'shape', shape: 'hexagon', subCategory: 'solid' },
      { type: 'shape', shape: 'speech-bubble', subCategory: 'solid' },
      { type: 'shape', shape: 'phone', subCategory: 'solid' },
      { type: 'shape', shape: 'badge', subCategory: 'solid' },
      { type: 'shape', shape: 'rounded-rect', subCategory: 'solid' },
      { type: 'shape', shape: 'starburst', subCategory: 'solid' },
      { type: 'shape', shape: 'grid', subCategory: 'solid' },
      { type: 'shape', shape: 'flowing-shape', subCategory: 'solid' },
      { type: 'shape', shape: 'flag', subCategory: 'solid' },
      { type: 'shape', shape: 'numbers-2024', subCategory: 'solid' },
      { type: 'shape', shape: 'arrow', subCategory: 'solid' }, // 实心箭头
      // 空心形状
      { type: 'shape', shape: 'circle', subCategory: 'hollow' },
      { type: 'shape', shape: 'triangle', subCategory: 'hollow' },
      { type: 'shape', shape: 'square', subCategory: 'hollow' },
      { type: 'shape', shape: 'rect', subCategory: 'hollow' },
      { type: 'shape', shape: 'star', subCategory: 'hollow' },
      { type: 'shape', shape: 'heart', subCategory: 'hollow' },
      { type: 'shape', shape: 'hexagon', subCategory: 'hollow' },
      { type: 'shape', shape: 'speech-bubble', subCategory: 'hollow' },
      { type: 'shape', shape: 'phone', subCategory: 'hollow' },
      { type: 'shape', shape: 'badge', subCategory: 'hollow' },
      { type: 'shape', shape: 'rounded-rect', subCategory: 'hollow' },
      { type: 'shape', shape: 'starburst', subCategory: 'hollow' },
      { type: 'shape', shape: 'grid', subCategory: 'hollow' },
      { type: 'shape', shape: 'flowing-shape', subCategory: 'hollow' },
      { type: 'shape', shape: 'flag', subCategory: 'hollow' },
      { type: 'shape', shape: 'numbers-2024', subCategory: 'hollow' },
      { type: 'shape', shape: 'arrow', subCategory: 'hollow' }, // 空心箭头
      // 笔刷类
      { type: 'shape', shape: 'squiggly', subCategory: 'brush' },
      // 图表类
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/pie-chart--v1.png', subCategory: 'chart' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/bar-chart.png', subCategory: 'chart' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/line-chart.png', subCategory: 'chart' },
      { type: 'shape', shape: 'grid', subCategory: 'chart' },
      // 字符类
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/exclamation-mark.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/question-mark.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/japanese-symbol-for-beginner.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/japanese-symbol-for-love.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/japanese-symbol-for-beautiful.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/japanese-symbol-for-good-luck.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/warning-shield.png', subCategory: 'character' },
      { type: 'image', url: 'https://img.icons8.com/ios-filled/50/000000/cancel.png', subCategory: 'character' },
      // 装饰类
      { type: 'shape', shape: 'flag', subCategory: 'decorative' },
      { type: 'shape', shape: 'numbers-2024', subCategory: 'decorative' },
    ]
  },
  {
    key: 'lines',
    label: '线条',
    items: [
      { type: 'shape', shape: 'line', subCategory: 'basic' },
      { type: 'shape', shape: 'line', subCategory: 'solid' },
      { type: 'shape', shape: 'line', subCategory: 'dotted' },
      { type: 'shape', shape: 'line', subCategory: 'dashed' },
      { type: 'shape', shape: 'squiggly', subCategory: 'squiggly' }, // 波浪线
    ]
  },
  {
    key: 'arrows',
    label: '箭头',
    items: [
      { type: 'shape', shape: 'arrow', subCategory: 'solid' },
      { type: 'shape', shape: 'arrow', subCategory: 'hollow' },
    ]
  },
  {
    key: 'image-containers',
    label: '图片容器',
    items: [
      { type: 'image-container', container: 'circle' },
      { type: 'image-container', container: 'triangle' },
      { type: 'image-container', container: 'square' },
    ]
  },
];

// 右侧工具栏工具项配置
const toolItems = [
  { label: "智能抠图", hot: true, icon: "✂️" },
  { label: "二维码美化", icon: "📷" },
  { label: "拼图", icon: "🧩" },
  { label: "图片美化", icon: "✨" },
  { label: "表格", icon: "📊" },
  { label: "图表", icon: "📈" },
  { label: "文字云", icon: "☁️" },
  { label: "对话框", icon: "💬" },
  { label: "多尺寸副本", icon: "📋" },
  { label: "批量水印", icon: "💧" },
  { label: "智能海报", icon: "📰" },
  { label: "日签", icon: "📅" },
  { label: "千人千面", icon: "🧑‍🤝‍🧑" },
  { label: "批量制作", new: true, icon: "🏗️" },
  { label: "动态填充", new: true, icon: "✨" },
];

// 右侧工具栏标签页
const toolTabs = ['工具', '背景', '页面', '尺寸'];

// Nav 组件主函数
const Nav: React.FC = () => {
  // 当前选中的侧边栏菜单项
  const [activeSidebar, setActiveSidebar] = useState("template");
  // 当前选择的工具栏标签页
  const [activeToolTab, setActiveToolTab] = useState(0);
  // 当前选中的素材子分类（如 shapes, lines, arrows 等）
  const [activeMaterialSubCategory, setActiveMaterialSubCategory] = useState("shapes"); // 默认显示形状
  // 当前选中的形状筛选分类
  const [activeShapeFilter, setActiveShapeFilter] = useState("all");
  // 当前选中的线条筛选分类
  const [activeLineFilter, setActiveLineFilter] = useState("all");
  // 当前选中的箭头筛选分类
  const [activeArrowFilter, setActiveArrowFilter] = useState("all");
  // 当前选中的文字筛选分类
  const [activeTextFilter, setActiveTextFilter] = useState("all");

  // 顶部右侧操作按钮配置
  const headerActions = [
     {label:'开通会员',className:'vip-btn'},
     {label:'保存',className:'save-btn'},
     {label:'分享',className:'share-btn'},
     {label:'下载',className:'download-btn'},
     {label:'退出',className:'logout-btn'},
  ];

  return (
    <div className="nav-container">
      {/* 顶部导航栏区域 */}
      <div className="nav-header">
        <div className="logo-title">
          {/* logo 区域 */}
          <img
            className="logo"
            src="https://img.icons8.com/ios-filled/50/1976d2/box.png"
            alt="logo"
          />
          <span className="title">易企秀海报制作</span>
        </div>
        {/* 风险提示区域 */}
        <div className="risk-tip">风险提示</div>
        {/* 顶部右侧操作按钮 */}
        <div className="nav-actions">
          {headerActions.map((item) => (
            <button key={item.label} className={item.className}>
              {item.label}
            </button>
          ))}
        </div>
      </div>

      {/* 主体区域，包含左侧栏、中间画布、右侧工具栏 */}
      <div className="nav-main">
        {/* 左侧侧边栏 */}
        <div className="sidebar">
          <div className="sidebar-top">
            {/* 侧边栏主菜单项 */}
            {sidebarItems.slice(0, 6).map((item) => (
              <div
                key={item.key}
                className={`sidebar-item${activeSidebar === item.key ? " active" : ""}`}
                onClick={() => setActiveSidebar(item.key)}
              >
                <div className="sidebar-icon">{item.icon}</div>
                <div className="sidebar-label">{item.label}</div>
                {/* 激活态高亮条 */}
                {activeSidebar === item.key && <div className="sidebar-active-bar" />}
              </div>
            ))}
          </div>
          <div className="sidebar-bottom">
            {/* API对接按钮 */}
            <div
              className={`sidebar-api${activeSidebar === "api" ? " active" : ""}`}
              onClick={() => setActiveSidebar("api")}
            >
              <span className="api-btn">API对接</span>
            </div>
            {/* 帮助按钮 */}
            <div
              className={`sidebar-help${activeSidebar === "help" ? " active" : ""}`}
              onClick={() => setActiveSidebar("help")}
            >
              <span className="help-icon">🎓</span>
              <span className="help-label">帮助</span>
            </div>
          </div>
        </div>

        {/* 左侧内容区域：模板、文字、素材等 */}
        {activeSidebar === "template" && (
          <div className="template-sidebar-content">
            {/* 搜索框 */}
            <div className="sidebar-search-container">
              <input type="text" placeholder="搜索想要的模板" />
              <span className="search-icon">🔍</span>
            </div>
            {/* 模板分类 Tabs */}
            <div className="template-tabs">
              <div className="template-tab active">全部模板</div>
              <div className="template-tab">综合</div>
              <div className="template-tab">最新</div>
              <div className="template-tab">最热</div>
              {/* 颜色选择器 */}
              <div className="template-color-picker" style={{ backgroundColor: '#ff0000' }}></div>
            </div>
            {/* 模板列表或占位图 */}
            <div className="template-placeholder">
              <div className="no-template-img" />
              <div className="no-template-text">暂无模板</div>
            </div>
          </div>
        )}

        {/* 左侧文字区域 */}
        {activeSidebar === "text" && (
          <div className="text-sidebar-content">
            {/* 搜索框 */}
            <div className="sidebar-search-container">
              <input type="text" placeholder="搜索想要的文字" />
              <span className="search-icon">🔍</span>
            </div>
            {/* 文字筛选 Tabs */}
            <div className="material-sub-filters">
              {textFilters.map((filter) => (
                <div
                  key={filter.key}
                  className={`material-sub-filter-tab${activeTextFilter === filter.key ? " active" : ""}`}
                  onClick={() => setActiveTextFilter(filter.key)}
                >
                  {filter.label}
                </div>
              ))}
            </div>
            {/* 文字列表 */}
            <div className="material-item-grid">
              {textCategories
                .filter(category => activeTextFilter === 'all' || category.key === activeTextFilter)
                .flatMap(category => category.items)
                .map((item: MaterialItem, index: number) => (
                  <div key={index} className={`material-grid-item text-item ${item.subCategory}`}>
                    <div className="text-content" data-effect={item.effect}>
                      {item.content}
                    </div>
                    <span className="favorite-icon">🧡</span>
                  </div>
                ))}
            </div>
          </div>
        )}

        {/* 左侧素材区域 */}
        {activeSidebar === "material" && (
          <div className="material-sidebar-content">
            {/* 搜索框 */}
            <div className="sidebar-search-container">
              <input type="text" placeholder="搜索想要的素材" />
              <span className="search-icon">🔍</span>
            </div>
            {/* 素材子分类 Tabs (艺术字, 形状, 线条, 箭头, 图片容器) */}
            <div className="material-subcategory-tabs">
              {materialCategories.map((category: MaterialCategory) => (
                <div
                  key={category.key}
                  className={`material-subcategory-tab${activeMaterialSubCategory === category.key ? " active" : ""}`}
                  onClick={() => {
                    setActiveMaterialSubCategory(category.key);
                    // 切换主分类时重置子筛选
                    if (category.key === 'shapes') {
                      setActiveShapeFilter('all');
                    } else if (category.key === 'lines') {
                      setActiveLineFilter('all');
                    } else if (category.key === 'arrows') {
                      setActiveArrowFilter('all');
                    }
                  }}
                >
                  {category.label}
                </div>
              ))}
            </div>
            {/* 根据当前子分类渲染不同内容 */}
            {activeMaterialSubCategory === "shapes" && (
              <div className="shapes-section-content">
                {/* 形状筛选 Tabs */}
                <div className="material-sub-filters">
                  {shapeFilters.map((filter) => (
                    <div
                      key={filter.key}
                      className={`material-sub-filter-tab${activeShapeFilter === filter.key ? " active" : ""}`}
                      onClick={() => setActiveShapeFilter(filter.key)}
                    >
                      {filter.label}
                    </div>
                  ))}
                </div>
                {/* 形状网格列表 */}
                <div className="material-item-grid">
                  {materialCategories
                    .find(cat => cat.key === 'shapes')
                    ?.items.filter(item =>
                      activeShapeFilter === 'all' || item.subCategory === activeShapeFilter
                    )
                    .map((item: MaterialItem, index: number) => {
                      let itemContent;
                      const isHollow = item.subCategory === 'hollow';
                      const itemClassName = `material-grid-item shape-item`;
                      // 根据 shape 类型渲染不同形状
                      if (item.shape === 'circle') {
                        itemContent = <div className={`shape-circle ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'triangle') {
                        itemContent = <div className={`shape-triangle ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'square') {
                        itemContent = <div className={`shape-square ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'rect') {
                        itemContent = <div className={`shape-rect ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'star') {
                        itemContent = <div className={`shape-star ${isHollow ? 'hollow' : ''}`}>★</div>;
                      } else if (item.shape === 'heart') {
                        itemContent = <div className={`shape-heart ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'hexagon') {
                        itemContent = <div className={`shape-hexagon ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'speech-bubble') {
                        itemContent = <div className={`shape-speech-bubble ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'phone') {
                        itemContent = <div className={`shape-phone ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'badge') {
                        itemContent = <div className={`shape-badge ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'squiggly') {
                        itemContent = <div className={`shape-squiggly ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'starburst') {
                        itemContent = <div className={`shape-starburst ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'rounded-rect') {
                        itemContent = <div className={`shape-rounded-rect ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'grid') {
                        itemContent = (
                          <div className={`shape-grid ${isHollow ? 'hollow' : ''}`}>
                            {Array.from({ length: 9 }).map((_, i) => (
                              <div key={i}></div>
                            ))}
                          </div>
                        );
                      } else if (item.shape === 'flowing-shape') {
                        itemContent = <div className={`shape-flowing-shape ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'flag') {
                        itemContent = <div className={`shape-flag ${isHollow ? 'hollow' : ''}`}></div>;
                      } else if (item.shape === 'numbers-2024') {
                        itemContent = <span className={`shape-numbers-2024 ${isHollow ? 'hollow' : ''}`}>2024</span>;
                      } else if (item.shape === 'arrow') {
                        if (item.subCategory === 'solid') {
                          itemContent = <div className="shape-arrow-solid"></div>;
                        } else if (item.subCategory === 'hollow') {
                          itemContent = <div className="shape-arrow-hollow"></div>;
                        } else {
                          itemContent = <div className="shape-arrow-right"></div>; // 其他箭头类型
                        }
                      } else if (item.type === 'image' && item.subCategory === 'character') {
                          itemContent = <img src={item.url} alt="material" className="material-image" />;
                      }
                      return (
                        <div key={index} className={itemClassName}>
                          {itemContent}
                          <span className="favorite-icon">🧡</span>
                        </div>
                      );
                    })}
                </div>
              </div>
            )}

            {/* 艺术字内容区 */}
            {activeMaterialSubCategory === "artistic-text" && (
              <div className="artistic-text-section-content">
                <div className="material-item-grid">
                  {materialCategories
                    .find(cat => cat.key === 'artistic-text')
                    ?.items.map((item: MaterialItem, index: number) => (
                      <div key={index} className="material-grid-item">
                        <div className="artistic-text-item">
                          {item.content}
                        </div>
                        <span className="favorite-icon">🧡</span>
                      </div>
                    ))}
                </div>
              </div>
            )}

            {/* 图片容器内容区 */}
            {activeMaterialSubCategory === "image-containers" && (
              <div className="image-containers-section-content">
                <div className="material-item-grid">
                  {materialCategories
                    .find(cat => cat.key === 'image-containers')
                    ?.items.map((item: MaterialItem, index: number) => {
                      let itemContent;
                      const itemClassName = "material-grid-item image-container-item";
                      if (item.container === 'circle') {
                        itemContent = <div className="image-container-circle"><span className="image-placeholder-icon">🏞️</span></div>;
                      } else if (item.container === 'triangle') {
                        itemContent = <div className="image-container-triangle" style={{ borderBottomColor: '#ccc' }}><span className="image-placeholder-icon">🏞️</span></div>;
                      } else if (item.container === 'square') {
                        itemContent = <div className="image-container-square"><span className="image-placeholder-icon">🏞️</span></div>;
                      }
                      return (
                        <div key={index} className={itemClassName}>
                          {itemContent}
                          <span className="favorite-icon">🧡</span>
                        </div>
                      );
                    })}
                </div>
              </div>
            )}

            {/* 线条内容区 */}
            {activeMaterialSubCategory === "lines" && (
              <div className="lines-section-content">
                {/* 线条筛选 Tabs */}
                <div className="material-sub-filters">
                  {lineFilters.map((filter) => (
                    <div
                      key={filter.key}
                      className={`material-sub-filter-tab${activeLineFilter === filter.key ? " active" : ""}`}
                      onClick={() => setActiveLineFilter(filter.key)}
                    >
                      {filter.label}
                    </div>
                  ))}
                </div>
                <div className="material-item-grid">
                  {materialCategories
                    .find(cat => cat.key === 'lines')
                    ?.items.filter(item =>
                      activeLineFilter === 'all' || item.subCategory === activeLineFilter
                    )
                    .map((item: MaterialItem, index: number) => {
                      let itemContent;
                      const itemClassName = `material-grid-item shape-item`;
                      // 线条类型渲染
                      if (item.shape === 'line') {
                        let lineClass = "shape-line";
                        if (item.subCategory === 'dotted') {
                          lineClass += " dotted";
                        } else if (item.subCategory === 'dashed') {
                          lineClass += " dashed";
                        }
                        itemContent = <div className={lineClass}></div>;
                      } else if (item.shape === 'squiggly') {
                        itemContent = <div className="shape-squiggly"></div>;
                      }
                      return (
                        <div key={index} className={itemClassName}>
                          {itemContent}
                          <span className="favorite-icon">🧡</span>
                        </div>
                      );
                    })}
                </div>
              </div>
            )}

            {/* 箭头内容区 */}
            {activeMaterialSubCategory === "arrows" && (
              <div className="arrows-section-content">
                {/* 箭头筛选 Tabs */}
                <div className="material-sub-filters">
                  {arrowFilters.map((filter) => (
                    <div
                      key={filter.key}
                      className={`material-sub-filter-tab${activeArrowFilter === filter.key ? " active" : ""}`}
                      onClick={() => setActiveArrowFilter(filter.key)}
                    >
                      {filter.label}
                    </div>
                  ))}
                </div>
                <div className="material-item-grid">
                  {materialCategories
                    .find(cat => cat.key === 'arrows')
                    ?.items.filter(item =>
                      activeArrowFilter === 'all' || item.subCategory === activeArrowFilter
                    )
                    .map((item: MaterialItem, index: number) => {
                      let itemContent;
                      const itemClassName = `material-grid-item shape-item`;
                      if (item.shape === 'arrow') {
                        if (item.subCategory === 'solid') {
                          itemContent = <div className="shape-arrow-solid"></div>;
                        } else if (item.subCategory === 'hollow') {
                          itemContent = <div className="shape-arrow-hollow"></div>;
                        } else {
                          itemContent = <div className="shape-arrow-right"></div>; // 其他箭头类型
                        }
                      }
                      return (
                        <div key={index} className={itemClassName}>
                          {itemContent}
                          <span className="favorite-icon">🧡</span>
                        </div>
                      );
                    })}
                </div>
              </div>
            )}

            {/* 其他分类占位内容 */}
            {activeMaterialSubCategory !== "artistic-text" && activeMaterialSubCategory !== "shapes" && activeMaterialSubCategory !== "lines" && activeMaterialSubCategory !== "arrows" && activeMaterialSubCategory !== "image-containers" && (
              <div className="material-placeholder">
                  <div className="no-template-img" />
                  <div className="no-template-text">暂无内容</div>
              </div>
            )}
          </div>
        )}

        {/* 中间画布区域 */}
        <div className="canvas-area">
          {/* 没有模板时的占位提示 */}
          <div className="canvas-placeholder">
            <div className="canvas-tip-icons">⬇️➡️</div>
            <div className="canvas-tip">
              从左侧选择模板添加到画布<br />
              点击设置背景，双击选择背景图
            </div>
          </div>
           {/* 会员提示横幅 */}
           <div className="canvas-vip-banner">
               开通会员 全站素材可商用
           </div>
        </div>

        {/* 右侧工具栏 */}
        <div className="tools-bar">
          <div className="tools-tabs">
              {toolTabs.map((tab, index) => (
                  <div
                      key={tab}
                      className={`tools-tab ${activeToolTab === index ? 'active' : ''}`}
                      onClick={() => setActiveToolTab(index)}
                  >
                      {tab}
                  </div>
              ))}
          </div>

          <div className="tool-content">
              {/* 工具列表页 */}
              {activeToolTab === 0 && (
                  <div className="tool-list">
                      {toolItems.map((tool) => (
                          <div
                              key={tool.label}
                              className={`tool-item${tool.hot ? " hot" : ""}${tool.new ? " new" : ""}`}
                          >
                              <div className="tool-icon">{tool.icon}</div>
                              {tool.label}
                          </div>
                      ))}
                  </div>
              )}
              {/* 其他标签页占位 */}
              {activeToolTab !== 0 && (
                  <div className="tools-placeholder"></div>
              )}
          </div>
          {/* 右侧底部图标区 */}
          <div className="tools-bottom">
              <div className="tools-bottom-icons">
                  <span>AI</span>
                  <span>S</span>
                  <span>Ps</span>
              </div>
              <div className="tools-bottom-zoom">51%</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Nav;